import React from 'react';
import './index.scss'


class ListSearch extends React.Component{

    constructor(){
        super();
        this.state={
            searchType:'productId',
            searchKeyword:''
        }
    }

    //数据变化时
    onValueChange(e){
        let name=e.target.name,
            value=e.target.value.trim()
        this.setState({
            [name]:value
        })
    }

    //点击搜索时
    onSearch(){
        this.props.onSearch(this.state.searchType,this.state.searchKeyword)
    }

    //点击回车时
    onSearchKeyworkKeyUp(e){
        if(e.keyCode===13){
            this.onSearch()
        }
    }


    render(){
        return(
            <div className="row search-wrap">
                <div className="col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control"
                                    name="searchType"
                                    onChange={(e)=>{this.onValueChange(e)}}>
                                <option value="productId">按商品ID查询</option>
                                <option value="productName">按商品名称查询</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input type="text"
                                   className="form-control"
                                   placeholder="关键词"
                                   onKeyUp={(e)=>this.onSearchKeyworkKeyUp(e)}
                                   name="searchKeyword"
                                   onChange={(e)=>{this.onValueChange(e)}}
                            />
                        </div>

                        <button type="primary"
                                className="btn btn-default"
                                onClick={(e)=>{this.onSearch(e)}}
                        >搜索</button>
                    </div>
                </div>
            </div>

        )
    }
}


export default ListSearch;